<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业五基础版</title>
		<link rel="stylesheet" href="/homework/web/base/layui/css/layui.css" />	
		<script type="text/javascript" src="/homework/web/base/layui/layui.all.js"></script>
	</head>
	<body>
		<fieldset class="layui-elem-field layui-field-title">
			<legend>表格数据维护</legend>
			<div class="layui-field-box">
				<div class="layui-form-item">
					<label class="layui-form-label">姓名</label>
					<div class="layui-input-inline">
						<input type="text" id='name2' class="layui-input" placeholder="请输入查询的姓名" />
					</div>
					<input type="button" id='sel' value="搜索" class="layui-btn" />
					<button class="layui-btn" id='add'>添加</button>
				</div>
				<table class="layui-table" style="width: 99%;">
					<thead>
						<tr>
							<th style="width: 5%;">ID</th>
							<th style="width: 25%;">姓名</th>
							<th style="width: 25%;">年龄</th>
							<th style="width: 30%;">生日</th>
							<th style="width: 20%;">操作</th>
						</tr>
					</thead>
					<tbody id='tbody'></tbody>
				</table>
			</div>
		</fieldset>


		<script type="text/javascript">
			//用jQuery方式添加
			var $ = layui.jquery; //从layui当中把jQuery对象取出来
			var layer = layui.layer;
			var laydate = layui.laydate; //获取时间日期格式
			var laytpl = layui.laytpl;

			$("#sel").click(testSelect);
			$("#add").click(openDialog); //添加
			function openDialog() {
				// layer.msg("123")
				layer.open({ //弹出一个框
					type: 1, //页面层
					title: "数据维护",
					closeBtn: 2, //右上关闭
					area: ["400px", "460px"], //宽度长度--范围面积
					shadeClose: true,
					content: $("#aa").html(), //content：是真正显示在网页中的东西，
					//将下面 id="aa"  的  type="text/html" 拿来用
					success: function() {
						dateRender('tTime')
						$("#b1").click(testAdd);
						$("#b2").click(closeLayer);
					}
				})
			}

			function closeLayer() {
				layer.close(layer.index);
			}
			var id = 1;

			function testAdd() {
				//取出来
				var name = $("#name").val()
				var age = $("#age").val()
				var time = $("#tTime").val()
				//放到表格里
				// var html = ""
				// +"<tr id='tr"+id+"'>"
				// +"<td id='tda"+id+"'>"+id+"</td>"
				// +"<td id='tdb"+id+"'>"+name+"</td>"
				// +"<td id='tdc"+id+"'>"+age+"</td>"
				// +"<td id='tde"+id+"'>"+time+"</td>"
				// +"<td id='tdd"+id+"'><a href='javascript:testDel("+id+");' class='layui-btn layui-btn-xs layui-btn-danger'>删除</a> <a href='javascript:testUpd("+id+");' class='layui-btn layui-btn-xs'>修改</a></td>"
				// +"</tr>"

				var data = {
					id: id,
					name: name,
					age: age,
					time: time
				};
				var html = $("#tradd").html();
				html = laytpl(html).render(data);

				$("tbody").append(html); //将获取到的信息放入<tbody id='tbody'></tbody>
				id++;
				closeLayer() //取消添加--关闭
			}

			function testDel(id) {
				layer.confirm("是否删除该行记录？", function(index) {
					$("#tr" + id).remove();
					layer.close(index);
				})
			}

			function testUpd(vid) {
				layer.open({
					type: 1,
					title: "数据维护",
					closeBtn: 2,
					area: ["400px", "460px"],
					shadeClose: true,
					content: $("#aa").html(),
					success: function() {
						dateRender('tTime')
						// $("#b1").click(testAdd);
						$("#b2").click(closeLayer);

						var name = $("#tdb" + vid).html()
						var age = $("#tdc" + vid).html()
						var time = $("#tde" + vid).html()
						$("#name").val(name);
						$("#age").val(age);
						$("#tTime").val(time);
						$("#b1").click({
							vid: vid
						}, testSave);
					}
				})
			}

			function testSave(event) {
				var vid = event.data.vid;
				$("#tdb" + vid).html($("#name").val())
				$("#tdc" + vid).html($("#age").val())
				$("#tde" + vid).html($("#tTime").val())
				$("#tdd" + vid).html("<a href='javascript:testDel(" + vid +
					");' class='layui-btn layui-btn-xs layui-btn-danger'>删除</a> <a href='javascript:testUpd(" + vid +
					");' class='layui-btn layui-btn-xs'>修改</a>")
				closeLayer()
			}

			function testSelect() {
				$("tr").css("background-color", "");
				var val = $("#name2").val();
				if (val == '')
					return;
				$("tr").each(function() {
					if ($(this).find("td[id^='tdb']").text().indexOf(val) > -1) {
						$(this).css("background-color", "green");
					}
				})
			}

			function dateRender(id) {
				laydate.render({
					elem: "#" + id, //渲染的标签
					type: "date" //标签的类型
				})
			}
		</script>
		<!-- 模板 -->
		<!-- 定义的东西在网页中看不到，但是还可以拿来用 -->
		<script type="text/html" id='aa'>
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-inline">
					<input type="text" id='name' class="layui-input" placeholder="输入姓名" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">年龄</label>
				<div class="layui-input-inline">
					<input type="text" id='age' class="layui-input" placeholder="输入年龄" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">生日</label>
				<div class="layui-input-inline">
					<input type="text" id='tTime' class="layui-input" placeholder="输入生日" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"></label>
				<div class="layui-input-inline">
					<input type="button" id='b1' class="layui-btn" value="确定" />
					<input type="button" id='b2' class="layui-btn" value="取消" />
				</div>
			</div>
		</script>
		<script type="text/html" id='tradd'>
			<tr id='tr{{ d.id }}'>
				<td id='tda{{ d.id }}'>{{ d.id }}</td>
				<td id='tdb{{ d.id }}'>{{ d.name }}</td>
				<td id='tdc{{ d.id }}'>{{ d.age }}</td>
				<td id='tde{{ d.id }}'>{{ d.time }}</td>
				<td id='tdd{{ d.id }}'>
					<a href="javascript:testDel({{d.id}})" 
						class="layui-btn layui-btn-xs layui-btn-danger">
						<i class="layui-icon layui-icon-delete"></i>   
					</a>
					<a href="javascript:testUpd({{d.id}})"
						class="layui-btn layui-btn-xs">
						修改
					</a>
				</td>
			</tr>
		</script>
	</body>
</html>
